<template>

  <video_Play :videoInfo="videoInfo" />
  <video_Info :videoInfo="videoInfo" />
  <video_Bottom />

</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRoute } from 'vue-router';
import { videoItem, getVideoDetails } from '../../service/api'
import video_Play from './components/video_Play.vue'
import video_Info from './components/video_Info.vue'
import video_Bottom from './components/video_bottom.vue'

const videoInfo = ref<videoItem>({})
const route = useRoute()

getVideoDetails({ id:route.params.id }).then((res) => {
  videoInfo.value = res.result
})
</script>

<style lang="less" scoped>
.video-info {
  padding: 3vw 2vw;
  border-bottom: 1px solid #ddd;
  .title {
    font-size: 4vw;
    line-height: 6vw;
    margin: 3vw 0;
  }
  .author-info {
    display: flex;
    align-items: center;
    font-size: 3vw;
    color: #999;
    .author {
      flex: 1;
      .author-avatar {
        width: 5vw;
        height: 5vw;
        object-fit: cover;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 1vw;
        background: url(~@/assets/images/loading.png) no-repeat center #e7e7e7;
      }

      .author-name {
        color: #212121;
      }
    }
    > span {
      margin: 0 2vw;
    }
    .iconfont {
      font-size: 5vw;
      color: #757575;
      margin-right: 2vw;
    }
  }
}
</style>
